<!-- 通告 -->
<template>
  <div>

    <mt-navbar v-model="selected">
      <mt-tab-item id="1">未读</mt-tab-item>
      <mt-tab-item id="2">已读</mt-tab-item>
    </mt-navbar>
    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <mt-loadmore :autoFill='false' :top-method="loadTop1" :bottom-method="loadBottom1" :bottom-all-loaded="allLoaded1" ref="loadmore1">
          <ul>
            <li class="msgWrap" v-for="(item,index) in msgList1" v-if='(!parseInt(item.status))' @click='showMsg(index)'>
              <div class="left">
                <h5>{{item.title}}</h5>
                <p>{{item.content}}</p>
              </div>
              <div class="right">{{item.create_time}}</div>
            </li>
          </ul>
        </mt-loadmore>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <mt-loadmore :autoFill='false' :top-method="loadTop2" :bottom-method="loadBottom2" :bottom-all-loaded="allLoaded2" ref="loadmore2">
          <ul>
            <li class="msgWrap" v-for="(item,index) in msgList2" v-if='(parseInt(item.status))' @click='showMsg(index)'>
              <div class="left">
                <h5>{{item.title}}</h5>
                <p>{{item.content}}</p>
              </div>
              <div class="right">{{item.create_time}}</div>
            </li>
          </ul>
        </mt-loadmore>

      </mt-tab-container-item>
    </mt-tab-container>
    <mt-popup class="msgPopup" v-model="popupVisible">
      <h5>{{msgObj.title}}</h5>
      <div class="time">{{msgObj.create_time}}</div>
      <div class="content">{{msgObj.content}}</div>

    </mt-popup>

  </div>
</template>
<script>
  // import { Popup } from 'mint-ui';
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        popupVisible: false,
        selected: '1',
        msgObj: {},
        page_size: 5,
        page_no1: 0,
        msgList1: [],
        allLoaded1: false, //用来判断数据是否加载完毕,为true的时候,上拉将不再加载数据
        page_no2: 0,
        msgList2: [],
        allLoaded2: false, //用来判断数据是否加载完毕,为true的时候,上拉将不再加载数据
        file: '',
      }
    },
    component: {
      Loadmore
    },
    created() {
      this.loadTop1(1);
  
    },
    methods: {
      loadTop1(state) { //下拉刷新事件
        if (this.msgList1.length == 0 && !state) {
          this.$refs.loadmore1.onTopLoaded();
          return;
        }
        var use_obj = JSON.parse(sessionStorage.getItem('loginData'));
        var pagesize = 10
        if (this.msgList1.length > 10) {
          pagesize = this.msgList1.length
        }
        var params = {
          receiver: use_obj.user_id,
          company_id: use_obj.company_id,
          page_no: 1,
          page_size: pagesize,
          status: 0,
          is_notification: 'Y',
          draw: 1,
        };
        this.$api.post('/wechat/queryMessage', params, (data) => {
          this.msgList1 = data.obj.list;
          if (!state) {
            this.$refs.loadmore1.onTopLoaded();
          }
        })
        console.log('params1' + JSON.parse(JSON.stringify(params)));
      },
      loadBottom1() { //上拉加载事件
        this.page_no1 += 1;
        this.getmsg1();
      },
      loadTop2(state) { //下拉刷新事件
        if (this.msgList2.length == 0 && !state) {
          this.$refs.loadmore2.onTopLoaded();
          return;
        }
        var use_obj = JSON.parse(sessionStorage.getItem('loginData'));
        var pagesize = 10;
        if (this.msgList2.length > 10) {
          pagesize = this.msgList2.length
        }
        var params = {
          receiver: use_obj.user_id,
          company_id: use_obj.company_id,
          page_no: 1,
          page_size: pagesize,
          status: 1,
          is_notification: 'Y',
          draw: 1,
        };
        console.log('params2' + JSON.stringify(params));
        this.$api.post('/wechat/queryMessage', params, (data) => {
          this.msgList2 = data.obj.list;
          if (!state) {
            this.$refs.loadmore2.onTopLoaded();
          }
        })
      },
      loadBottom2() { //上拉加载事件
        this.page_no2 += 1;
        this.getmsg2();
      },
      showMsg: function (index) { //查看消息详情
        if (this.selected == '1') {
          this.msgObj = this.msgList1[index];
          var params = {
            id: this.msgList1[index].id
          }
          this.$api.post('/api/message/csMessage/readMessage', params, (data) => {
            this.loadTop1(1);
            this.loadTop2(1);
          })
        } else {
          this.msgObj = this.msgList2[index];
        }
        this.popupVisible = true;

      },
      getmsg1() { //获取未读消息
        var use_obj = JSON.parse(sessionStorage.getItem('loginData'));
        var params = {
          receiver: use_obj.user_id,
          company_id: use_obj.company_id,
          page_no: this.page_no1,
          page_size: this.page_size,
          status: 0,
          is_notification: 'Y',
          draw: 1,
        };
        this.$api.post('/wechat/queryMessage', params, (data) => {
          console.log('data1', JSON.parse(JSON.stringify(data)));
          if (data.obj.list.length > 0) {
            data.obj.list.forEach(element => {
              this.msgList1.push(element);
            });
          };
          console.log('length', data.obj.list.length);
          if (!data.obj.list.length || data.obj.list.length < 5) {
            this.allLoaded1 = true; //长度小于5说明没数据了,不需要下拉加载了
          }
          this.$refs.loadmore1.onBottomLoaded(); //重新定位下拉加载组件高度
        })
      },
      getmsg2() { //获取已读消息
        var use_obj = JSON.parse(sessionStorage.getItem('loginData'));
        var params = {
          receiver: use_obj.user_id,
          company_id: use_obj.company_id,
          page_no: this.page_no2,
          page_size: this.page_size,
          status: 1,
          is_notification: 'Y',
          draw: 1,
        };
        this.$api.post('/wechat/queryMessage', params, (data) => {
          console.log('data2', JSON.parse(JSON.stringify(data)));
          if (data.obj.list.length > 0) {
            data.obj.list.forEach(element => {
              this.msgList2.push(element);
            });
          };
          if (data.obj.list.length < 5) {
            this.allLoaded2 = true; //长度小于5说明没数据了,不需要下拉加载了
          }
          this.$refs.loadmore2.onBottomLoaded(); //重新定位下拉加载组件高度
        })
      },
    },
   watch: {
    selected(){  //tab切换刷新
        switch(this.selected){
          case '1': this.loadTop1(1);
             break;
          case '2':this.loadTop2(1);
             break;       
        }
      }
   }
  }

</script>
<style>
  .mint-navbar {
    font-weight: bold;
  }

  ul {
    margin: 0.1rem 0 0;
    padding: 0
  }

  .msgWrap {
    list-style: none;
    display: flex;
    font-size: 0.3rem;
    padding: 0.2rem 0.2rem 0.3rem;
    height: 2.5rem;
    background: white;
    margin-bottom: 0.13rem;
  }

  .msgWrap .left {
    width: 7.5rem;
    text-align: left;
  }

  .msgWrap .left h5 {
    font-size: 0.6rem;
    margin: 0.1rem 0;
  }

  .msgWrap .left p {
    font-size: 0.3rem;
    margin: 0;
    text-overflow: ellipsis;
    height: 1.2rem;
    overflow: hidden;
    line-height: 0.6rem;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .msgWrap .right {
    width: 2.2rem;
    font-size: 0.2rem;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .msgPopup {
    border-radius: 0.2rem;
    height: 10rem;
    overflow: auto;
    padding: 0.1rem 0.2rem;
  }

  .msgPopup h5 {
    margin: 0.15rem 0;
    width: 8rem;
    font-weight: 100;
    font-size: 0.5rem;
  }

  .msgPopup .time {
    font-size: 0.3rem;
    text-align: left;
    margin: 0.1rem 0;
  }

  .msgPopup .content {
    font-size: 0.3rem;
    text-align: left;
  }

</style>
